<template>
  <view class="m-t40">
    <view class="flex">
      <view class="line" />
      <text class="flex-1 text-700-130">最新简历</text>
      <text class="text-400-326" @click="gotoUrl">更多</text>
      <image class="square-28 m-l10" src="@/static/images/public/arrow-3.png" />
    </view>

    <scroll-view class="m-t20" scrollX="true" :showScrollbar="false">
      <view class="flex">
        <view v-for="item in list" :key="item.id" class="card flex-d-cl m-r20" @click="toResumePage(item)">
          <view class="flex-1 flex p-a20">
            <image class="cover" :src="item.avatar" mode="aspectFill" />
            <view class="flex-1 flex-d-lc m-l20">
              <view class="flex w">
                <text class="flex-1 text-700-130">{{ item.nickname }}</text>
                <text class="text-500-326">{{ item.time }}</text>
              </view>
              <!-- <text class="m-t16 text-500-326">{{ item.job.length > 0 ? item.job[0].position : '--' }}</text> -->
            </view>
          </view>

          <view class="info flex-sb p-h20">
            <view class="flex">
              <image class="square-24" src="@/static/images/home/duration.png" />
              <text class="m-l10 text-400-326">{{ item.work > 0 ? `${getWorkTimesLabel(item.work)}` : '无经验' }}</text>
            </view>
            <view class="divider" />
            <view class="flex">
              <image class="square-24" src="@/static/images/home/education.png" />
              <text class="m-l10 text-400-326">{{ item.highest_education }}</text>
            </view>
            <view class="divider" />
            <view class="flex">
              <image class="square-24" src="@/static/images/home/location.png" />
              <!-- <text class="m-l10 text-400-326">{{ item.city }} · 青羊区</text> -->
              <text class="m-l10 text-400-326">{{ item.city }}</text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type { TResume } from '@/types/api.d'
import { useCommonStore } from '@/stores/user'
const { getWorkTimesLabel } = useCommonStore()
const list = ref<TResume[]>([])

const toResumePage = (item) => {
  uni.navigateTo({ url: `/pages/office/resume/resume?user_id=${item.id}` })
}

const getList = () => {
  uni.$u.get<TResume[]>('/resume/newresume').then((res) => {
    if (res.code === 1) {
      list.value = res.data
    }
  })
}
function gotoUrl() {
  uni.switchTab({ url: "/pages/tab-page/tab-2/tab-2" })
}
getList()
</script>

<style lang="scss" scoped>
.line {
  width: 8rpx;
  height: 26rpx;
  margin-right: 20rpx;
  background-color: $bg-color-2;
}

.card {
  flex-shrink: 0;
  width: 486rpx;
  height: 220rpx;
  border-radius: 20rpx;
  background-color: $bg-color-1;

  .cover {
    width: 102rpx;
    height: 102rpx;
    border-radius: 10rpx;
    border: 1rpx solid $border-color-4;
  }

  .info {
    height: 77rpx;
    border-top: 1px solid $border-color-4;

    .flex .text-400-326 {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100rpx;
    }
  }

  .divider {
    width: 1rpx;
    height: 24rpx;
    background-color: #E4E4E4;
  }
}
</style>
